<!DOCTYPE html>
{% load staticfiles %}

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="{% static 'css/semantic.css' %}" media="screen" title="no title" charset="utf-8">
        <link rel="stylesheet" href="{% static 'css/list_custom.css' %}"  media="screen" title="no title" charset="utf-8">
        <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway" rel="stylesheet">


    </head>
    <body>
        <div class="ui inverted top fixed menu borderless red menu">
            <div class="header item">
                <div class="ui image">
                    <img src="{% static 'images/tenlogo.png' %}" alt="" />
                </div>
            </div>



            <div class="right menu">
                {% if request.user.is_authenticated %}
                    <div class="item">
                        <h5 class="ui inverted header">
                            <span style="margin-right:20px;">{{ request.user.username }}</span>
                            <div class="ui mini circular image">
                                {% if request.user.profile.profile_image %}
                                    <img src="/upload/{{ request.user.profile.profile_image }}" alt="" />
                                {% else %}
                                    <img src="http://semantic-ui.com/images/avatar/small/matt.jpg" alt="" />
                                {% endif %}


                            </div>
                        </h5>
                    </div>
                    <div class="item">
                        <a href="{% url 'logout' %}" class="ui inverted circular button">Logout</a>
                    </div>

                {% else %}

                    <div class="item">
                        <h5 class="ui inverted header">
                            <span style="margin-right:20px;">{{ request.user.username }}</span>
                            <div class="ui mini circular image">
                                <img src="http://semantic-ui.com/images/avatar/small/matt.jpg" alt="" />
                            </div>
                        </h5>
                    </div>
                    <div class="item">
                        <a href="#" class="ui inverted circular button">Signup/Login</a>
                    </div>
                {% endif %}


            </div>
        </div>
        <div class="ui inverted segment container nav">
            <div class="ui  three borderless  item  menu">
                    <a class="item">
                        All
                    </a>
                    <a class="item">
                        New
                    </a>

                    {% if 'editors' in request.path %}
                        <a class="active item" href="{% url 'list' %}editors">
                            Editor's
                        </a>

                    {% else %}

                        <a class="item" href="{% url 'list' %}editors">
                            Editor's
                        </a>

                    {% endif %}


            </div>
        </div>


        <div class="ui basic segment container content"  >

            <div class="ui three column grid">

                {% for vid in vids_list %}
                    <div class="column">
                        <a class="ui fluid card" href="{% url 'detail' vid.id %}">
                            <div class="image" >
                                {% if vid.cover %}
                                    <img src="/upload/{{ vid.cover }}" alt="" style="height:200px;object-fit: cover;">
                                {% else %}
                                    <img src="{{ vid.url_image }}" alt="" style="height:200px;object-fit: cover;">
                                {% endif %}


                            </div>
                        </a>

                        <div class="title header" href="#">{{ vid.title|truncatechars:30 }}</div>
                        <i class="icon grey unhide"></i>
                        <span style="color:#bbbbbb">10K</span>
                        <span class="" style="color:rgb(226, 226, 226)">|</span>
                        <i class="icon grey checkmark"></i>
                        <span style="color:#bbbbbb">10 people got it</span>

                    </div>

                {% endfor %}
            </div>
        </div>
    </div>


    <div class="ui center aligned very padded vertical segment container">
        <div class="ui pagination menu">
            {% if vids_list.has_previous %}
                <a href="?page={{ vids_list.previous_page_number }}" class="item">
                    <i class="icon red left arrow"></i>
                </a>
            {% else %}
                <a href="?page={{ vids_list.start_index }}" class="disabled item">
                    <i class="icon  left arrow"></i>
                </a>
            {% endif %}

            {% if  vids_list.has_next %}
                <a href="?page={{ vids_list.next_page_number }}" class="item">
                    <i class="icon red right arrow"></i>
                </a>

            {% else %}

                <a href="?page={{ vids_list.end_index }}" class="disabled item">
                    <i class="icon  right arrow"></i>
                </a>
            {% endif %}




        </div>
        <!-- </div> -->
    </body>
</html>
